<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代</title>
  <script src="js/jquery/jquery-3.3.1.min.js"></script>
  <style>
    .cls *{
      border: 1px solid lightgray;
      margin: 30px;
      padding: 20px;
      background-color: #9999CC;
      display: block;
    }
  </style>
  <script>
    $(function (){
      $("#btn1").click(function (){
        $("#ele_div").children().css({"border":"1px solid red","backgroundColor":"lightblue"});
      });
      $("#btn2").click(function (){
        $("#ele_div").find("span").css({"border":"1px solid green","backgroundColor":"hotpink"});
      });
    })
  </script>
</head>
<body>
<div id="ele_div" class="cls" style="width: 1300px;height:400px;border: 1px solid lightblue ;background-color: burlywood">
  <div style="width: 300px;float: left;">
    <div style="width: 200px;height: 150px">
      <span>一段文本1</span>
    </div>
  </div>

  <div style="width: 300px;float: left;">
    <div style="width: 200px;height: 150px">
      <span>一段文本2</span>
    </div>
  </div>

  <div style="width: 300px;float: left;">
    <div style="width: 200px; height: 150px">
      <span>一段文本3</span>
    </div>
  </div>

</div>
<button id="btn1">div直接子元素</button>
<button id="btn2">查找div后代span元素</button>
</body>
</html>